<template>
    <a-modal v-model:visible="visible" :closable="false" :width="900" :wrap-style="{ overflow: 'hidden' }" @ok="onClose">
        <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
            <a-row :gutter="24">

                <a-col :span="16">
                    <a-form-item name="name">
                        <a-input v-model:value="searchFormState.name" placeholder="请输入检索条件" />
                    </a-form-item>
                </a-col>

                <a-col :span="8" class="text-right">
                    <a-button type="primary" @click="refresh(true)">查询</a-button>
                </a-col>
            </a-row>
        </a-form>
        <s-table ref="tableRef"  tableLayout="fixed" :row-selection="{
            type: 'checkbox',
            selectedRowKeys: selectedRowKeys, onChange: onSelectChange
        }" :size="5" :data="loadData" bordered :columns="columns" class="mb-2">
            <template #bodyCell="{ column, record, index }">
                <template v-if="column.key === 'index'">
                    {{ index + 1 }}
                </template>
                <template v-if="column.key === 'costUnitPrice'">
                    {{ Number(record.laborUnitPrice) + Number(record.unitPrice) }}
                </template>
                <template v-if="column.key === 'synUnitPrice'">
                    <a-input-number :precision="2" :min="0"   v-model:value="record.synUnitPrice"  ></a-input-number>
                </template>
                <template v-if="column.key === 'quantities'">
                    <a-input-number v-model:value="record.quantities" ></a-input-number>
                </template>
            </template>
        </s-table>
    </a-modal>
</template>
<script setup>
import Api from '@/api/pm/cost/promaterial'

import { ref } from 'vue';
const tableRef = ref()

const visible = ref(false)
const show = (selectRows) => {
    console.log("show", selectRows)
    visible.value = true
}


const searchFormState = ref({})

const loadData = (parameter) => {
    
    searchFormState.value.current = parameter.current
    searchFormState.value.size = parameter.size
    return Api.page(searchFormState.value).then((res) => {
        const newRes = res.records.map(obj => {
            return { ...obj, quantities: 1, synUnitPrice:Number(obj.laborUnitPrice) + Number(obj.unitPrice) };
        });
        res.records = newRes
        return res
    })
}

const selectedRows = ref([])
const selectedRowKeys = ref([])
const onSelectChange = (keys, rows) => {
    selectedRows.value = rows;

    console.log('selectedRowKeys changed: ', selectedRows);
}

const emits = defineEmits(['onClose'])
const onClose = () => {
    visible.value = false;
    emits('onClose', selectedRows.value)
};
defineExpose({
    show
});
const refresh = () => {
    tableRef.value.refresh(true)
}
const columns = [
    {
        title: '物料编码',
        dataIndex: 'code',
        key: 'code',
        width: 100,
    },
    {
        title: '物料名称',
        dataIndex: 'name',
        key: 'name',
        width: 140,
    },
    {
        title: '单位',
        dataIndex: 'unit',
        key: 'unit',
    },
    {
        title: '人工单价',
        dataIndex: 'laborUnitPrice',
        key: 'laborUnitPrice',
    },
    {
        title: '物料单价',
        dataIndex: 'unitPrice',
        key: 'unitPrice',
    },
    {
        title: '成本单价',
        dataIndex: 'costUnitPrice',
        key: 'costUnitPrice',
    },
    {
        title: '综合单价',
        dataIndex: 'synUnitPrice',
        key: 'synUnitPrice',
        width: 130,
    },
    

    {
        title: '工程量',
        dataIndex: 'quantities',
        key: 'quantities',
        width: 100,
    }

]
const dataSource = [
    {
        key: '12',
        code: "TS0001",
        name: '车道边缘线',
        unit: "平方米",
        laborUnitPrice: 5,
        unitPriceOfMaterials: 10,
        costUnitPrice: 15,

    },
    {
        key: '22',
        code: "TS0002",
        name: '突起标志',
        unit: "个",
        laborUnitPrice: 5,
        unitPriceOfMaterials: 10,
        costUnitPrice: 15,

    },
]

const items = ref([])
items.value = dataSource.map(item => {
    return {
        ...item,
        count: 1
    }
});
</script>